<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue中的表单的输入</title>
</head>
<body>
    <div id="app">
       <p>
            <input type="text" v-model="textValue" />
            text绑定的值是：{{textValue}}
       </p>
       <p>
           男<input type="radio" v-model="radioValue" value="male">
           女<input type="radio" v-model="radioValue" value="female">
            <p> radioValue: {{radioValue}}</p>
       </p>
       <p>
           游戏<input type="checkbox" v-model="checkboxValue" value="game">
           音乐<input type="checkbox" v-model="checkboxValue" value="music">
           学习<input type="checkbox" v-model="checkboxValue" value="study">
           <p>checkboxValue: {{checkboxValue}}</p>
       </p>
       <p>
           <select v-model="selectedValue">
               <option value="">请选择...</option>
               <option value="a">A</option>
               <option value="b">B</option>
               <option value="c">C</option>
           </select>
           <p>selectdValue: {{selectedValue}}</p>
       </p>
    </div>
    <script src="vue.js"></script>
    <script>
      new Vue({
          el: "#app",
          data: {
            textValue: "",
            radioValue:false,
            checkboxValue:[],
            selectedValue:""
          }
      });
    </script>
</body>
</html>